<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MapboxGL</title>
    <link href='lib/mapbox-gl.css' rel='stylesheet' />
    <style>
        html, body, .map {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script>
        const icons = ['city', 'red-star']
        let iconDict = {}
        let index = 0
        let width = 0, height = 0

        function loadImage() {
            const icon = icons[index]
            const img = new Image()
            img.src = `icon/${icon}.png`
            img.onload = () => {
                iconDict[icon] = {
                    img: img,
                    width: img.width,
                    height: img.height,
                    x: 0,
                    y: height,
                    pixelRatio: 1,
                    visible: true
                }
                width = width > img.width ? width: img.width
                height += img.height
                index++
                if(index === icons.length) {
                    generateSprite()
                } else {
                    loadImage()
                }
            }
        }

        loadImage()

        function generateSprite() {
            const canvas = document.createElement('canvas')
            document.body.appendChild(canvas)
            canvas.width = width
            canvas.height = height
            const ctx = canvas.getContext('2d')
            for(let icon in iconDict) {
                ctx.drawImage(iconDict[icon].img, 0, iconDict[icon].y)
                delete iconDict[icon].img
            }
            console.log(JSON.stringify(iconDict))
        }
    </script>
</head>
<body>
</body>
</html>